<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果</title>
	</head>
	<script src="../js/jquery-1.11.1.js"></script>
	<script>
		$(function(){
			//jq相关操作  思路：滚动下拉条，超过200px 吸顶灯顶死在页面上
			//超过200px 固定>滚动 吸顶灯通过添加样式操作定死在页面上
			//①固定值：获取到达吸顶灯位置的偏移量
			//offset()获取或者设置元素相对于文档的偏移量
			//.top，获取body顶部
			var so=$("#sticky").offset().top
			//$(Window)来监听窗口的事件，：滚动、窗口大小
			//scroll（）监听页面滚动事件
			$(Window).scroll(function(){
				//超过200px；
				//①获取页面滚动值：动态值 scrollTop()获取滚动位置【动态值】
				var st=$(Window).scrollTop()
				//超过200px 动态值>固定值200 条件满足 页面吸顶灯样式定死
				if(st>so){
					$("#sticky").addClass("ac")
				}else{
					$("#sticky").removeClass("ac")
				}
			});
		});
	</script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#top_content{
			width: 100%;
			height: 200px;
			background-color: #e7e7e7;
		}
		#sticky{
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
			background-color: #ffaaff;
		}
		#main_content{
			height: 8000px;
			background-color: #e7e7e7;
		}
		/*吸顶灯效果*/
		.ac{
			position: fixed;
			top: 0;
			width: 100%;
		}
	</style>
	<body>
		<div id="top_content">顶部区域</div>
		<div id="sticky">我是吸顶灯</div>
		<div id="main_content">
			<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi nihil ab eveniet, autem quasi iste minima officia. Officia asperiores, exercitationem veritatis adipisci accusamus quod, iste est assumenda, aut esse corrupti.
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum sunt aliquid accusantium nostrum, blanditiis amet nulla, at architecto corrupti debitis ipsum ipsam, labore temporibus quibusdam perspiciatis. Rem, hic ullam! Voluptas?</p>
		</div>
	</body>
</html>